<template>
  <div id="goodsDetails">
    <el-row id="nav">
      <el-container>
        <el-header height="40px">
          <el-col :span="13" offset="3">
            <!-- 页面路径 -->
            <el-breadcrumb
              separator-class="el-icon-arrow-right"
              id="nav_breadcrumb"
            >
              <el-breadcrumb-item>二手商品</el-breadcrumb-item>
              <el-breadcrumb-item>二手手机通讯</el-breadcrumb-item>
              <el-breadcrumb-item>二手手机</el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>

          <el-col :span="5">
            <!-- 店铺名 -->
            <span id="store">{{ shopName }}店铺</span>
            <!-- 店铺评分 -->
            <el-rate v-model="value1"></el-rate>
          </el-col>
        </el-header>
      </el-container>
    </el-row>
    <el-row>
      <el-col :span="18" offset="3" id="bottom">
        <el-col :span="10" id="left">
          <img :src="goodsImg">
        </el-col>
        <el-col :span="12" id="right" offset="2">
          <div class="title">
            {{ goodsName }}
          </div>
          <div class="price">
            <span class="text">价格：</span><span style="color:red;font-size:20px;">￥{{ goodsPrice }}</span>
          </div>
          <div class="button">
            <el-input-number
              v-model="num"
              @change="handleChange"
              :min="1"
              :max="10"
              label="描述文字"
            ></el-input-number>
          </div>
          <div class="add">
            <el-button type="success" @click="addOrder"><span>+</span> 加入购物车</el-button>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { goodsDetailAPI, addOrderAPI } from "@/api";
export default {
  name: "goodsDetails",
  data() {
    return {
      value1: null,
      num: 1,
      goodsName: "",
      goodsPrice: "",
      goodsImg: "",
      shopName: "",
      gid: this.$route.params.gid,
    };
  },
  mounted() {
    this.getGoodsAllInfo();
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    async getGoodsAllInfo() {
      console.log(this.gid);
      const id = parseInt(this.gid);
      const detailRes = await goodsDetailAPI(id);
      // this.goodsDeatail.goodsImg = detailRes.data.data.goodsImg;
      if (detailRes.data.statusCode === 200) {
        this.goodsName = detailRes.data.data.goodsName;
        this.goodsPrice = detailRes.data.data.goodsPrice;
        this.goodsImg = detailRes.data.data.goodsImg;
        this.shopName = detailRes.data.data.shopName;
      }
    },
    async addOrder(){
      // let data = {
      //   goodsName:this.goodsName,
      //   goodsPrice:this.goodsPrice,
      //   shopName:this.shopName,
      //   goodsImg:this.goodsImg,
      // }
      // const addOrderRes = await addOrderAPI();
      // if(addOrderRes.data.statusCode === 200){
      //   this.$notify({
      //     title: "添加成功",
      //     message: addOrderRes.data.message,
      //     type: "success",
      //   });
      // }
    }
  },
};
</script>

<style scoped>
#goodsDetails #nav {
  background-color: white
}
#goodsDetails .el-header {
  background-color: rgb(242, 242, 242);
  color: #333;
  text-align: center;
  line-height: 40px;
  border: none;
}
#goodsDetails #nav_breadcrumb {
  line-height: 40px;
  font-size: 12px;
  width: 300px;
}
#goodsDetails .el-rate {
  width: 200px;
  display: inline-block;
}
#goodsDetails .el-rate__icon {
  width: 6px;
  height: 6px;
  margin-left: 7px;
  line-height: 10px;
}
#goodsDetails #store {
  font-size: 14px;
  margin-right: -40px;
}

#goodsDetails #bottom #left {
  background-color: #fff;
}
#goodsDetails #bottom #left img {
  height: 450px;
  background-color: #fff;
}
#goodsDetails #bottom #right {
  height: 200px;
}
#goodsDetails #bottom #right .title {
  font-size: 17px;
  line-height: 40px;
  height: 80px;
  overflow: hidden;
}
#goodsDetails #bottom #right .text {
  font-size: 17px;
  color: #666;
  line-height: 40px;
  height: 80px;
  overflow: hidden;
}
.button {
  margin-top: 200px;
  display: inline-block;
}
.add {
  display: inline-block;
  margin-left: 200px;
}

</style>